<template>
	<Page>
		<web-view v-if="showSop" @message="onMessage" :webview-styles="webviewStyles" :src="sopUrl"></web-view>
		<Topbar hideMenu />
		<Content>
			<Panel header headerBorder title="SOP查看" style="padding: 4rem;">
				<view slot="toolbar">
					<view class="back" @click="back">
						<u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
					</view>
				</view>
				<view class="table-demo">
					<Table ref="table" :columns="columns" :src="src" :params="params" @rowClick="click" pagination />
				</view>
				<!-- <view class="table-demo">
					<view class="table">
						<view class="table-loading" v-if="loading">
							<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
						</view>
						<view class="table-tr">
							<view class="table-th">文件名</view>
							<view class="table-th">产品名称</view>
							<view class="table-th">制定人</view>
							<view class="table-th">维护时间</view>
							<view class="table-th">操作</view>
						</view>
						<view class="table-tr table-empty" v-if="tableData.length === 0">
							暂无数据
						</view>
						<view class="table-tr" v-for="(item, index) in tableData" :key="index" @click="click(item)"
							v-if="tableData.length !== 0">
							<view class="table-td">
								<view class="text-overflow-ellipsis">
									--
								</view>
							</view>
							<view class="table-td">
								<view class="text-overflow-ellipsis">
									--
								</view>
							</view>
							<view class="table-td">
								<view class="text-overflow-ellipsis">
									--
								</view>
							</view>
							<view class="table-td">
								<view class="text-overflow-ellipsis">
									--
								</view>
							</view>
							<view class="table-td">
								<view class="text-overflow-ellipsis">
									--
								</view>
							</view>
						</view>
					</view>
					<view class="uni-pagination-box">
						<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
							@change="change" />
					</view>
				</view> -->
			</Panel>
		</Content>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Table from '@/components/table/index.vue';
	import {
		getDevice
	} from "@/store/user.js";
	import fetch from "@/utils/fetch.js";

	export default {
		components: {
			Table,
			Page,
			Topbar,
			Content,
			Panel
		},
		data() {
			return {
				tableData: [],
				pageSize: 10,
				pageCurrent: 1,
				total: 0,
				loading: false,
				showSop: false,
				sopUrl: 'http://www.bilibili.com',
				webviewStyles: {
					progress: {
						color: '#FF3333'
					},
				},
				src: '/dms/mobile/sopWorkPage',
				params: {
					deviceCode: getDevice().deviceNo
				},
				columns: [{
						label: '产品名称',
						value: 'materialName',
						width: '43rem',
					}, {
						label: '图号规格',
						value: 'customMaterialCode',
						width: '25rem',
					},
					{
						label: '材料牌号',
						value: 'materialMark',
						width: '25rem',
					},
					{
						label: '工单号',
						value: 'workCode',
						width: '20rem',
					},
					{
						label: '工单组号',
						value: 'groupItem',
						width: '20rem',
					},
					{
						label: '产品编号',
						value: 'materialCode',
						width: '20rem',
					}, {
						label: '产品型号',
						value: 'materialModel',
						width: '30rem',
					}, {
						label: '模具名称',
						value: 'moldName',
					}, {
						label: '模具编号',
						value: 'moldCode',
					}, {
						label: '生产顺序',
						value: 'sort',
					},
				],
				orderCode: '',
			}
		},
		methods: {
			click(item) {
				this.orderCode = item.orderCode
				this.getData()
			},
			back() {
				this.goto('/pages/workbench/index');
			},
			onMessage(options){
				console.log(options,77)
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			onBackPress(options) {
				if (options.from === 'navigateBack') {
					return false;
				}
				if (this.showSop==true && options.from === 'backbutton') {
					this.showSop=false;
				}else{
					uni.navigateBack(-1)
				}
				return true;
			},
			// 分页触发
			change(e) {
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				const deviceCode = getDevice().deviceNo;
				fetch('get', '/dms/mobile/viewSop', {
					orderCode: this.orderCode
				}).then((res) => {
					console.log(res)
					this.loading = false;
					// this.tableData = res.records || [];
					if (res.flag !== true) {
						this.showSop = false
						this.$toast(res.msg)
					} else {
						this.showSop = true;
						this.sopUrl = res.msg;
					}
					// this.total = res.total || 0;
				});
			}
		},
		mounted() {
			this.$refs['table'] && this.$refs['table'].reload();
		},
		onShow() {
			this.$refs['table'] && this.$refs['table'].reload();
		}
	}
</script>

<style scoped lang="scss">
	.back {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.table-demo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.table {
		width: 100%;
		display: flex;
		flex-direction: column;
		border: 1px solid #ecf0f2;
		border-radius: 2rem;
		overflow: hidden;
		position: relative;

		.table-loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
		}

		.table-empty {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 0;
			font-size: 2rem;
		}

		.table-tr {
			display: flex;
			flex-direction: row;
			border-top: 1px solid #ecf0f2;
		}

		.table-th {
			flex: 1;
			background: #edf1f3;
			font-size: 2rem;
			text-align: center;
			padding: 2rem 0;
			overflow: hidden;
		}

		.table-td {
			flex: 1;
			font-size: 2rem;
			text-align: center;
			padding: 1.8rem 0;
			overflow: hidden;
		}

		.text-overflow-ellipsis {
			width: 80%;
			padding: 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: 0 auto;
		}
	}

	/deep/ .uni-pagination-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 2rem;
		font-size: 2rem;

		.uni-pagination__total {
			font-size: 2rem;
		}

		.uni-pagination__btn {
			font-size: 2rem;
		}

		.uni-pagination__num {
			font-size: 2rem;
		}

		.uni-pagination__num-tag {
			width: 6rem;
		}
	}

	.web-view {
		position: relative;

		.btn {
			width: 100px;
			position: absolute;
			top: 100px;
			left: 100px;
		}
	}
</style>